// 导入React
import React from "react";

/**
 * 受控组件示例
 * 
 * 注意 复选框 是根据 checked 属性获取状态值的
 */
class App extends React.Component{

    constructor(props) {
        super(props)
        // 表单状态
        this.state = {
           txt:'xx',
        }
      }

    // 文本变化
    handleChange = (e) => {
        // 改变state
        this.setState({
            txt: e.target.value
        })
    }

    render() {
        return (
            <div>
                {/* 文本框 */}
                <input type='text' value={this.state.txt} onChange={this.handleChange}></input>
                <hr/>

                {/* 文本域 */}
                <textarea></textarea>
                <hr/>

                {/* 下拉框 */}
                <select>
                    <option value='sh'>上海</option>
                    <option value='bj'>北京</option>
                    <option value='gz'>广州</option>
                </select>
                <hr/>

                {/* 复选框 */}
                <input type='checkbox'></input>
            </div>
        )
    }

}

export default App
